<!--
 * @description: 封装一个tooltip组件，用于显示提示信息
 * @fileName: index.vue 
 * @author: DangPeng
 * @date: 2023-12-21 14:09:03 
-->
<template>
    <view class="cus-tooltip">
        <view v-show="show" class="cus-tooltip__content" :style="{ left, top, right, bottom }">
            <view>
                {{ content }}
            </view>
        </view>
        <view class="cus-tooltip__arrow">
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false,
        },
        left: {
            type: String,
            default: '10%',
        },
        top: {
            type: String,
            default: () => '',
        },
        right: {
            type: String,
            default: () => '',
        },
        bottom: {
            type: String,
            default: () => '',
        },
        content: {
            type: String,
            default: () => '',
        },
        position: {
            type: String,
            default: () => 'top',
        },
    },
    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.cus-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;

    &__content {
        position: absolute;
        z-index: 10;
        padding: 10rpx;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 4rpx;
        box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
        font-size: 24rpx;
        color: #fff;
        line-height: 1.5;
        white-space: nowrap;
        word-wrap: normal;
        word-break: break-all;
        transform: translate(-50%, calc(-100% - 10rpx));

        &::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            width: 0;
            height: 0;
            border: 6rpx solid transparent;
            border-top-color: rgb(0, 0, 0);
            transform: translate(-50%, 0);
        }
    }
}
</style>